import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import BtnBotLayout from '@/components/BtnBotLayout'
import { useEffect, useState } from 'react'
import { Input } from 'antd-mobile'
import EasyModal from '@/components/EasyModal'
import { history } from 'umi'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { userInfo, getUserInfo, sendPdf } = store
    const [email, setEmail] = useState('')
    const [showError, setShowError] = useState(false)
    const [visible, setVisible] = useState(false)

    useEffect(() => {
        document.title = '生成附件档案'
        getUserInfo()
    }, [])

    function handelSend() {
        const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
        if (!regex.test(email)) {
            setShowError(true)
        } else {
            setShowError(false)
            setVisible(true)
        }
    }

    return (
        <div className={styles.container}>
            <BtnBotLayout
                footer={
                    <div className={styles.submit_btn} onClick={handelSend}>
                        发送
                    </div>
                }
            >
                <div className={styles.wrapper}>
                    <div className={styles.title}>发送到邮箱</div>
                    <div className={styles.tips}>该附件档案将发送至您填写的邮箱，并同步提交实操作业</div>
                    <div className={styles.input_wrapper}>
                        <Input
                            value={email}
                            onChange={value => {
                                setEmail(value)
                                const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
                                if (!regex.test(value)) {
                                    setShowError(true)
                                } else {
                                    setShowError(false)
                                }
                            }}
                            placeholder="请输入要发送附件档案的邮箱"
                        />
                    </div>
                    <div className={styles.err_info} style={{ display: showError ? 'block' : 'none' }}>
                        请输入正确的邮箱地址
                    </div>
                    <div className={styles.file_name}>
                        {userInfo?.name}（{userInfo?.userStudent?.class_number}）求职档案
                    </div>
                </div>
            </BtnBotLayout>
            <EasyModal
                visible={visible}
                title="邮箱确认"
                okText="确认"
                content={`您要发送的邮箱地址是${email}请确认您的邮箱地址无误后发送`}
                onClose={() => setVisible(false)}
                onOk={() => {
                    sendPdf(email).then(res => {
                        history.replace(`/archives?send=${email}`)
                    })
                }}
                showClose
            />
        </div>
    )
})
